/**
 * @module  充值
 * @author 熊莎
 * @date 2021-01-05 14:15:48
 */
import React, { useState, useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
import request from '@src/utils/request';
import HeaderComponent from '@src/pages/components/Header';
import wx from 'weixin-js-sdk';
import { Toast } from 'antd-mobile';
import './index.less';

interface IList {
  actual_price?: string;
  created_at?: string;
  credit_price?: string;
  id?: number;
  title?: string;
  type?: number;
  updated_at?: string;
}

const Recharge = (props: RouteComponentProps) => {
  const [list, setList] = useState<IList[]>([]);

  const getList = () => {
    request('get', '/api/v1/discount').then((res) => {
      if (res && res.code === 200) {
        setList(res.data);
      }
    });
  };

  const pay = (id) => {
    // 充值
    request('post', '/api/v1/wechat_pay_account', {
      discount_id: id,
    }).then((res) => {
      if (res && res.code === 200) {
        // setList(res.data);
        // 微信支付
        const { appId, nonceStr, paySign, signType, timestamp, package: packageId } = res.data;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId, // 必填，公众号的唯一标识
          timestamp, // 必填，生成签名的时间戳
          nonceStr, // 必填，生成签名的随机串
          signature: paySign, // 必填，签名
          jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
        });
        wx.ready(() => {
          wx.chooseWXPay({
            timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr, // 支付签名随机串，不长于 32 位
            package: packageId, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign, // 支付签名
            success() {
              // 支付成功后的回调函数
              props.history.replace('/');
              Toast.success('支付成功');
            },
          });
        });
      }
    });
  };
  useEffect(() => {
    getList();
  }, []);
  return (
    <div className="rechare">
      <HeaderComponent text="充值活动" />
      <ul>
        {list.map((cur) => (
          <li className="rechare-list" key={cur.id}>
            {cur.title}
            <span className="text-btn" onClick={() => pay(cur.id)}>
              ¥{cur.actual_price}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default Recharge;
